<template>
  <div>
    <el-upload
      :action="uploadImgUrl"
      ref="upload"
      list-type="picture-card"
      :limit="3"
      @submit.native.prevent
      :headers="headers"
      :show-file-list="true"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="handleUploadSuccess">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
      <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto;">
    </el-dialog>
  </div>

</template>
<script>
// import { listNetSecurityImg, delNetSecurityImg } from '@/api/websitemanage/netsecurityimg'
import { getToken } from '@/utils/auth'

export default {
  name: 'NetSecurityImg',
  components: {},
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      titleName: '图片管理',
      form: {},
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [],
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/uploadImage", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      // 照片墙
      upload: {
        // 设置上传的请求头部
        
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/common/uploadImage"
      },
    }
  },
  created() {
    console.log("this.value = " + this.value)
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleUploadSuccess(res, file, fileList) {
      this.$emit("input", res.url);
      this.value = fileList
    },
    handleBeforeUpload() {
      this.loading = this.$loading({
        lock: true,
        text: "上传中",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    handleUploadError() {
      this.$message({
        type: "error",
        message: "上传失败",
      });
      this.loading.close();
    },
  }
}
</script>

<style scoped lang="scss">
.image {
  position: relative;
  .mask {
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
  }
  &:hover .mask {
    opacity: 1;
  }
}
</style>